<template>
  <div>
    <!-- 车辆分配明细 -->
    <strong>车辆分配明细</strong>
    <LPTablePage
      :show-index="false"
      :show-indexfixed="false"
      index-label="序号"
      :table-data="tableData1"
      :table-column="tableColumn1"
      :show-page="false"
      :span-method="spanMethod"
      align="center"
    />
    <!-- 承运商分配信息 -->
    <strong>承运商分配信息</strong>
    <LPTablePage
      :show-index="true"
      :show-indexfixed="false"
      index-label="序号"
      :table-data="tableData2"
      :table-column="tableColumn2"
      :show-page="false"
      align="center"
    />
  </div>
</template>

<script>
import LPTablePage from '@/components/LPTablePage/index.vue'

export default {
  components: { LPTablePage },
  props: {
    data: {
      type: Object,
      default: {
        appLogisticProducts: [], // 车辆分配明细
        appLogisticProductGroupBys: [] // 物料分配信息
      }
    }
  },
  data() {
    return {
      tableData1: [],
      tableColumn1: [
        { label: '序号', prop: 'index', width: 50 },
        { label: '承运商', prop: 'carriersName' },
        { label: '车牌号', prop: 'car' },
        // {label: "卡号", prop: "cardNumber"},
        { label: '排放标准', prop: 'discharge' },
        { label: '司机', prop: 'driverName' },
        { label: '电话', prop: 'driverTel' },
        { label: '匹配时间', prop: 'time' },
        { label: '物料名称', prop: 'productName' },
        { label: '物料规格', prop: 'productSpecifications' },
        { label: '单位', prop: 'unit' },
        { label: '数量', prop: 'productNumber' },
        { label: '理重（吨）', prop: 'totalWeight' }
      ],
      tableData2: [],
      tableColumn2: [
        { label: '承运商', prop: 'carriersName' },
        { label: '物料名称', prop: 'productName' },
        { label: '物料规格', prop: 'productSpecifications' },
        { label: '分配捆数', prop: 'productNumber' }
      ]
    }
  },
  created() {
    // this.tableData1 = this.data.appLogisticProducts

    // var arr1 = this.data.appLogisticProducts
    // var arr5 = []
    // for(var i=0;i<2;i++){
    //   this.data.appLogisticProducts.forEach(element => {
    //     arr5.push(element)
    //   });
    // }

    // this.data.appLogisticProducts = arr5

    // 数据分组
    const groupData = {}
    this.data.appLogisticProducts.map((item, i) => {
      if (!groupData[item.loadingListId]) {
        groupData[item.loadingListId] = [item]
      } else {
        groupData[item.loadingListId].push(item)
      }
    })

    // console.log(groupData)

    var tableData = []
    var index = 0
    for (var key in groupData) {
      var list = groupData[key]
      index++
      list.forEach((item, i) => {
        var t = {}
        if (i === 0) {
          t.rowspan = list.length
          t.index = index
        } else {
          t.rowspan = null
        }
        Object.assign(t, item)
        tableData.push(t)
      })
    }
    this.tableData1 = tableData
    // console.log(tableData)

    this.tableData2 = this.data.appLogisticProductGroupBys
  },
  methods: {
    // 合并表列行
    spanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex <= 6) {
        if (row.rowspan) {
          return {
            rowspan: row.rowspan,
            colspan: 1
          }
        } else {
          return {
            rowspan: 0,
            colspan: 0
          }
        }
      }
    }
  }
}
</script>

<style scoped>
strong {
  margin: 10px 0;
  display: block;
}
</style>
